<template>
  <div class="ExecuteSorties" :style="showHead ? '' : 'width:100%'" @click.stop>
    <div v-if="showHead" class="title">
      <div class="name"><div class="content">执行架次</div></div>
      <el-tooltip effect="dark" content="收起" placement="top">
        <img
          src="/img/cockpit/closeArrow.png"
          alt=""
          class="closeArrow"
          @click.stop="closeRight"
        />
      </el-tooltip>
    </div>
    <div class="card">
      <div class="total" :class="{ isSingle: !showHead, isSmall: isSmall }">
        <div class="number">{{ executeData.executeSum || 0 }}</div>
        <div class="title">总执行架次</div>
      </div>
      <div class="category" :class="{ isSingle: !showHead, isSmall: isSmall }">
        <div class="item">
          <div class="text">正常架次</div>
          <div class="number">{{ executeData.normalNum || 0 }}</div>
          <div class="text">架</div>
        </div>
        <div class="item">
          <div class="text">违规架次</div>
          <div class="number">{{ executeData.illegalNum || 0 }}</div>
          <div class="text">架</div>
        </div>
      </div>
      <div class="controlBtn">
        <div
          v-for="item in btnList"
          :key="item.dictValue"
          :class="item.dictValue === isClick ? 'btnAloneClick' : 'btnAlone'"
          @click="clickHandle(item)"
        >
          {{ item.dictLabel }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ExecuteSorties",
};
</script>

<script setup>
import { computed, defineProps, onMounted } from "vue";
import useCockpitStore from "@/store/modules/cockpit";
import { getDictionary } from "@/api/system/dict/type";

const props = defineProps({
  showHead: {
    type: Boolean,
    default: true,
  },
  isSmall: {
    type: Boolean,
    default: false,
  },
});
const cockpitStore = useCockpitStore();
let executeData = computed(() => {
  return cockpitStore.executeData || {};
});

const emits = defineEmits(["closeRight"]);

const isClick = ref("total");
const btnList = ref([]);

const clickHandle = (val) => {
  isClick.value = val.dictValue;
  cockpitStore.getExecuteData(val.dictValue);
};

const getListType = () => {
  getDictionary("aircraft_type").then((data) => {
    if (data.code === 200) {
      btnList.value = data.data;
      btnList.value.unshift({
        dictLabel: "全部",
        dictValue: "total",
      });
      cockpitStore.getExecuteData("total");
    }
  });
};

const closeRight = () => {
  emits("closeRight");
};

onMounted(() => {
  getListType();
});
</script>

<style scoped lang="scss">
.ExecuteSorties {
  margin-right: 15px;
  width: 528px;
  z-index: 20;
  .title {
    position: relative;
    width: 100%;
    height: 52px;
    display: flex;
    justify-content: space-between;
    // align-items: center;

    .name {
      padding-left: 45px;
      width: 486px;
      height: 48px;
      background: url("/img/cockpit/titleBack.png");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: bottom;

      .content {
        text-align: left;
        font-size: 24px;
        font-family: "YouSheBiaoTiHei";
        font-weight: 400;
        color: rgba(255, 255, 255, 0);
        // text-shadow: 0px 3px 2px #081b1e;

        background: linear-gradient(
          0deg,
          rgba(73, 136, 181, 0.96) 0%,
          rgba(255, 255, 255, 0.96) 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .closeArrow {
      position: absolute;
      left: 0;
      width: 50px;
      height: 50px;
      cursor: pointer;
      top: -9px;
      right: 10px;
    }
  }

  .card {
    position: relative;
    display: flex;
    justify-content: space-around;
    padding: 0 15px;
    align-items: center;
    width: 100%;
    height: 176px;
    background: url("/img/cockpit/cardBack.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .total {
      position: relative;
      width: 182px;
      height: 120px;
      background: url("/img/cockpit/sorties.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;

      .number {
        position: absolute;
        top: 18px;
        left: 50%;
        transform: translateX(-50%);
        height: 38px;
        font-size: 36px;
        font-family: DigifaceWide;
        font-weight: 400;
        color: #ffffff;

        background: linear-gradient(0deg, #ffffff 0%, #00cadc 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .title {
        position: absolute;
        top: 67px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 12px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }
    }

    .total.isSingle {
      margin-left: 40px;
    }

    .total.isSmall {
      margin-left: 0;
    }

    .category {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      height: 65px;
      .item {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .text {
        // width: 48px;
        height: 12px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }

      .number {
        margin-right: 10px;
        margin-left: 18px;
        width: 42px;
        height: 22px;
        font-size: 20px;
        font-family: DIN;
        font-weight: bold;
        color: #ffffff;
        // text-shadow: 1px 2px 2px rgba(27, 59, 64, 0.8);

        background: linear-gradient(0deg, #ffffff 0%, #00cadc 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .category.isSingle {
      margin-right: 40px;
    }

    .category.isSmall {
      margin-right: 0;
    }

    .controlBtn {
      // position: absolute;
      width: 100px;
      height: 170px;
      padding-top: 1%;
      // left: 3%;

      .btnAlone {
        width: 68px;
        height: 26px;
        border: 1px solid #023b41;
        background: rgba(0, 230, 255, 0.1);
        border-radius: 4px;
        margin: 11% 16%;
        color: #ffffff;
        text-align: center;
        font-size: 14px;
        opacity: 0.8;
        // font-weight: bold;
        padding: 2% 0;
        cursor: pointer;
      }

      .btnAloneClick {
        width: 68px;
        height: 26px;
        background: rgba(0, 230, 255, 0.1);
        border-radius: 4px;
        margin: 11% 16%;
        text-align: center;
        font-size: 14px;
        opacity: 0.8;
        // font-weight: bold;
        padding: 2% 0;
        cursor: pointer;
        border: 1px #00e0f8 solid;
        color: #00ecfb;
      }
    }
  }
}
</style>
